<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="nav-left" @click="goBack">
				<u-icon name="arrow-left" color="#000" size="36upx"></u-icon>
			</view>
			<view class="nav-title">设置</view>
			<view class="nav-right"></view>
		</view>

		<!-- 用户信息区域 -->
		<view class="user-info-section">
			<view class="user-avatar">
				<image class="avatar-img" src="/static/avatar.jpg" mode="aspectFill"></image>
			</view>
			<view class="user-details">
				<view class="user-item">
					<text class="label">昵称:</text>
					<text class="value">用户名</text>
				</view>
				<view class="user-item">
					<text class="label">账号:</text>
					<text class="value">1070237</text>
				</view>
			</view>
		</view>

		<!-- 菜单列表 -->
		<view class="menu-section">
			<!-- 账号安全 -->
			<view class="menu-item" @click="navTo('/pages/account-security/account-security')">
				<view class="menu-left">
					<view class="menu-icon security-icon">
						<image src="/static/icon/secure.png"></image>
					</view>
					<text class="menu-text">账号安全</text>
				</view>
				<u-icon name="arrow-right" color="#333" size="18"></u-icon>
			</view>

			<!-- 支付设置 -->
			<view class="menu-item" @click="navTo('/pages/payment-settings/payment-settings')">
				<view class="menu-left">
					<view class="menu-icon payment-icon">
						<image src="/static/icon/payment-set.png"></image>
					</view>
					<text class="menu-text">支付设置</text>
				</view>
				<u-icon name="arrow-right" color="#333" size="18"></u-icon>
			</view>

			<!-- 消息通知 -->
			<view class="menu-item" @click="navTo('/pages/notification/notification')">
				<view class="menu-left">
					<view class="menu-icon message-icon">
						<image src="/static/icon/notice.png"></image>
					</view>
					<text class="menu-text">消息通知</text>
				</view>
				<u-icon name="arrow-right" color="#333" size="18"></u-icon>
			</view>

			<!-- 隐私政策 -->
			<view class="menu-item" @click="navTo('/pages/privacy-policy/privacy-policy')">
				<view class="menu-left">
					<view class="menu-icon privacy-icon">
						<image src="/static/icon/privacy.png"></image>
					</view>
					<text class="menu-text">隐私政策</text>
				</view>
				<u-icon name="arrow-right" color="#333" size="18"></u-icon>
			</view>

			<!-- 用户协议 -->
			<view class="menu-item" @click="navTo('/pages/user-agreement/user-agreement')">
				<view class="menu-left">
					<view class="menu-icon agreement-icon">
						<image src="/static/icon/agreement.png"></image>
					</view>
					<text class="menu-text">用户协议</text>
				</view>
				<u-icon name="arrow-right" color="#333" size="18"></u-icon>
			</view>
		</view>

		<view class="foot-box">
			<!-- 操作按钮区域 -->
			<view class="action-section">
				<!-- 切换账号 -->
				<view class="action-btn switch-account" @click="switchAccount">
					<text class="action-text">切换账号</text>
				</view>

				<!-- 退出登录 -->
				<view class="action-btn logout-btn" @click="showLogoutConfirm">
					<text class="action-text">退出登录</text>
				</view>
			</view>

			<!-- 底部协议链接 -->
			<view class="footer-links">
				<text class="link-text" @click="openPrivacyPolicy">《个人信息收集清单》</text>
				<text class="link-text" @click="openDataPolicy">《第三方信息数据共享》</text>
			</view>
		</view>
	</view>
</template>

<script>
import {
	mapMutations,
	mapState
} from 'vuex';

export default {
	data() {
		return {

		};
	},
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	methods: {
		...mapMutations(['logout']),

		// 返回
		goBack() {
			uni.navigateBack();
		},

		// 导航跳转
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},

		// 切换账号
		switchAccount() {
			uni.navigateTo({
				url: '/pages/public/login'
			});
		},

		// 显示退出登录确认
		showLogoutConfirm() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						this.toLogout();
					}
				}
			});
		},

		// 退出登录
		toLogout() {
			this.logout();
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/public/login'
				});
			}, 500);
		},

		// 打开隐私政策
		openPrivacyPolicy() {
			this.$api.msg('个人信息收集清单');
		},

		// 打开数据政策
		openDataPolicy() {
			this.$api.msg('第三方信息数据共享');
		}
	}
}
</script>

<style lang='scss'>
page {
	background: #f8f8f8;
}

.container {
	min-height: 100vh;
	background: #f8f8f8;
}

// 导航栏
.navbar {
	background: #fff;
	height: 88upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30upx;
	border-bottom: 1upx solid #eee;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding-top: var(--status-bar-height);
	height: calc(88upx + var(--status-bar-height));

	.nav-left {
		width: 100upx;

		.back-icon {
			font-size: 44upx;
			color: #000;
			font-weight: 300;
		}
	}

	.nav-title {
		font-size: 36upx;
		font-weight: 500;
		color: #000;
	}

	.nav-right {
		width: 100upx;
	}
}

// 用户信息区域
.user-info-section {
	background: #fff;
	padding: 50upx 30upx;
	display: flex;
	align-items: center;
	gap: 40upx;
	margin-top: calc(88upx + var(--status-bar-height));
	box-shadow: 0 0 10upx 6upx rgba(0, 0, 0, 0.06);

	.user-avatar {
		display: flex;
		align-items: center;
		justify-content: center;

		.avatar-img {
			width: 140upx;
			height: 140upx;
			border-radius: 50%;
			border: 6upx solid #ffffff;
			box-shadow: 0 0 10upx 6upx rgba(0, 0, 0, 0.1);
		}
	}

	.user-details {
		flex: 1;

		.user-item {
			display: flex;
			align-items: end;
			margin-bottom: 16upx;

			&:last-child {
				margin-bottom: 0;
			}

			.label {
				font-size: 28upx;
				color: #666;
				width: 100upx;
			}

			.value {
				font-size: 34upx;
				color: #000;
				font-weight: 500;
			}
		}
	}
}

// 菜单列表
.menu-section {
	background: #fff;
	margin-top: 30upx;
	padding: 0 30upx;

	.menu-item {
		height: 110upx;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 36upx 0;
		border-bottom: 1upx solid #eee;

		&:last-child {
			border-bottom: none;
		}

		.menu-left {
			display: flex;
			align-items: center;
			gap: 10upx;

			.menu-icon {
				width: 66upx;
				border-radius: 12upx;
				display: flex;
				align-items: center;
				justify-content: center;

				&.security-icon {
					image {
						width: 36upx;
						height: 44upx;
					}
				}

				&.payment-icon {
					image {
						width: 42upx;
						height: 42upx;
					}
				}

				&.message-icon {
					image {
						width: 44upx;
						height: 44upx;
					}
				}

				&.privacy-icon {
					image {
						width: 40upx;
						height: 44upx;
					}
				}

				&.agreement-icon {
					image {
						width: 36upx;
						height: 44upx;
					}
				}
			}

			.menu-text {
				font-size: 32upx;
				color: #000;
			}
		}

		.arrow {
			font-size: 28upx;
			color: #C7C7CC;
			font-weight: 400;
		}
	}
}

// 操作按钮区域
.action-section {
	padding: 80upx 30upx 40upx;

	.action-btn {
		width: 100%;
		height: 100upx;
		border-radius: 16upx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 24upx;

		&:last-child {
			margin-bottom: 0;
		}

		.action-text {
			font-size: 32upx;
			font-weight: 400;
		}

		&.switch-account {
			background: #fff;

			.action-text {
				color: #000;
			}
		}

		&.logout-btn {
			background: #fff;

			.action-text {
				color: #666;
			}
		}
	}
}

// 底部协议链接
.footer-links {
	display: flex;
	align-items: center;
	justify-content: center;

	.link-text {
		font-size: 26upx;
		color: #fa436a;
	}
}

.foot-box {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 0 30upx 60upx;
}
</style>
